<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <base th:href="@{/}">
    <title>尚硅谷会员注册页面</title>
    <link type="text/css" rel="stylesheet" href="static/css/style.css"/>
    <link rel="stylesheet" href="static/css/register.css"/>
    <style type="text/css">
        .login_form {
            height: 420px;
            margin-top: 25px;
        }
    </style>
</head>
<body>
<div id="app">
  <div id="login_header">
    <a href="index.html">
      <img class="logo_img" alt="" src="static/img/logo.gif"/>
    </a>
  </div>

  <div class="login_banner">
    <div class="register_form">
      <h1>注册尚硅谷会员</h1>
      <form th:action="@{/user}" @submit="mySubmit()">
        <input type="hidden" name="method" value="regist">
        <div class="form-item">
          <div>
            <label>用户名称:</label>
            <input  name="userName" type="text" placeholder="请输入用户名" @change="userNameCheck()" v-model="userName"/>
          </div>
          <span class="errMess" v-text="errorUserNameMsg">用户名应为6~16位数组和字母组成</span>
        </div>
        <div class="form-item">
          <div>
            <label>用户密码:</label>
            <input name="userPwd" type="password" placeholder="请输入密码" @change="passWordCheck()" v-model="passWord"/>
          </div>
          <span th:if="${existUser == null}" class="errMess" v-text="errorPassWordMsg">密码的长度至少为5位</span>
          <span th:unless="${existUser == null}" class="errMess" ></span>
        </div>
        <div class="form-item">
          <div>
            <label>确认密码:</label>
            <input name="reUserPwd" type="password" placeholder="请输入确认密码" @change="rePassWordCheck()" v-model="rePassWord"/>
          </div>
          <span class="errMess" v-text="errorRePassWordMsg">密码两次输入不一致</span>
        </div>
        <div class="form-item">
          <div>
            <label>用户邮箱:</label>
            <input name="email" type="text" placeholder="请输入邮箱" @change="emailCheck()" v-model="email"/>
          </div>
          <span class="errMess" v-text="errorEmailMsg">请输入正确的邮箱格式</span>
        </div>
        <div class="form-item">
          <div>
            <label>验证码:</label>
            <div class="verify">
              <input type="text" name="inputCode" placeholder="" @change="codeCheck()" v-model="code"/>
<!--              <img src="static/img/code.bmp" alt=""/>-->
              <img :src="kaptchaPath" @click="kaptcha()" alt=""/>
            </div>
          </div>
          <span class="errMess" v-text="errorCodeMsg">请输入正确的验证码</span>
        </div>
        <button class="btn">注册</button>
      </form>
    </div>
  </div>
  <div id="bottom">
      <span>
        尚硅谷书城.Copyright &copy;2015
      </span>
  </div>
</div>

</body>
<script src="static/script/vue.js"></script>
<script>
  var vue = new Vue({
    el: "#app",
    data: {
      errorUserNameMsg:"[[${errorMsg}]]",
      errorPassWordMsg:"密码的长度至少为5位",
      errorRePassWordMsg:"",
      errorEmailMsg:"",
      errorCodeMsg:"[[${kaptchaCode}]]",
      existUser:"[[${existUser}]]",
      userName:"",
      passWord:"",
      rePassWord:"",
      email: "",
      code: "",
      kaptchaPath:"kaptcha",
    },
    methods: {
        /*isExistUser(){
          if(this.existUser !=null){
              var s = this.existUser.valueOf().replace("=",":");
              var existUser1 = JSON.parse(s);
            console.log(s);
            this.userName = existUser1.userName;
            this.passWord = existUser1.userPwd;
            this.rePassWord = existUser1.userPwd;
            this.email=existUser1.email;
            return;
          }
        },*/
      /*点击一次图片,刷新一次*/
      kaptcha(){
          //alert("hahah");
          this.kaptchaPath = "kaptcha?"+new Date();
          //this.kaptchaPath = "kaptcha";
      },
      checkReg(reg,data){
        if(reg.test(data)){
          return true;
        }else {
          return false;
        }

      },
      userNameCheck(){
        var flag = this.checkReg(/^[0-9a-zA-Z]{6,16}$/,this.userName);

        if(flag){
          this.errorUserNameMsg = "";
          return true;
        }else {
          this.errorUserNameMsg = "用户名应为6~16位数组和字母组成";
          return false;
        }
      },
      passWordCheck(){
        var flag = this.checkReg(/^.{5,}$/,this.passWord);
        if(flag){
          this.errorPassWordMsg = "";
          return true;
        }else {
          this.errorPassWordMsg = "密码的长度至少为5位";
          return false;
        }
      },
      rePassWordCheck(){
        if (this.passWord == this.rePassWord){
          this.errorRePassWordMsg = "";
          return true;
        }else {
          this.errorRePassWordMsg = "两次输入密码不一致";
          return false;
        }
      },
      emailCheck(){
        var flag = this.checkReg(/^[a-zA-Z0-9_\.-]+@([a-zA-Z0-9-]+[\.]{1})+[a-zA-Z]+$/,this.email);
        if(flag){
          this.errorEmailMsg = "";
          return true;
        }else {
          this.errorEmailMsg = "请输入正确的邮箱格式!";
          return false;
        }
      },
      codeCheck(){
        var flag = this.checkReg(/^[a-zA-Z0-9]{4}$/,this.code);
        if(flag){
          this.errorCodeMsg = "";
          return true;
        }else {
          this.errorCodeMsg = "请输入4位验证码!";
          return false;
        }
      },
      mySubmit(){

        if(!this.userNameCheck()||!this.passWordCheck() || !this.rePassWordCheck() || !this.emailCheck() || !this.codeCheck()){
          event.preventDefault();
          return;
        }
      },
    },
    created(){
      this.isExistUser();
    },
  });
</script>
</html>
